<template>
  <div style="display: inline-block; margin: 0 12px">
    <el-button type="primary" @click="createCodeFn">生成</el-button>
    <Cdrawer title="生成代码" ref="createCodeDioRef">
      <template #content><div id="coder"></div></template>
      <template #confirm>
        <el-button @click="copyCode" type="primary">复制</el-button>
      </template>
    </Cdrawer>
  </div>
</template>
<script setup lang="ts">
import { useDrag } from "@/store/modules/drag";
import { copyLink, clearEmptyKey } from "@/assets/utils";
import { basicSetup } from "codemirror";
import { EditorView, keymap } from "@codemirror/view";
import { indentWithTab } from "@codemirror/commands";
import { oneDark } from "@codemirror/theme-one-dark";
import { vue } from "@codemirror/lang-vue";
function initCodeContent() {
  nextTick(() => {
    new EditorView({
      doc: codeTemplate.value,
      extensions: [basicSetup, oneDark, keymap.of([indentWithTab]), vue()],
      parent: document.querySelector("#coder")
    });
  });
}
const dragStore = useDrag();
const createCodeDioRef = ref(null);
const codeTemplate = ref("");
function copyCode() {
  copyLink(codeTemplate.value);
}

function createCodeFn() {
  let templateVue = "";
  let scripVue = "";
  let scripImport = "";
  let scripOnmouted = "";
  let formType = ["cSearch", "cDio", "cTable", "cPage"];
  let has = dragStore.renderData.find((item) => {
    return formType.includes(item.key);
  });
  if (has) {
    scripImport = `
import { intialFnFn, intialDataFn } from '@/components/CSuperForm/index';
let intialDataFnClass = new intialDataFn();`;
  }
  dragStore.renderData.map((iteem) => {
    let item = clearEmptyKey(iteem);
    if (formType.includes(item.key)) {
      let renderMap = dragStore.registerConfig.componentMap[item.key].headerOpt;
      if (item.type.includes("cForm_u")) {
        if (item.props.otherGetFile) {
          item.methods.otherGetFileFn = "otherGetFileFn";
          scripVue += `
function otherGetFileFn({ e, props }) {

}`;
        }
      }
      if (item.type == "cTable") {
        if (item.props.afterGetData) {
          item.methods.afterGetData = "afterGetData";
          scripVue += `
function afterGetData(res) {

}`;
        }
        if (item.props.deleteAfter) {
          item.methods.deleteAfter = "deleteAfter";
          scripVue += `
function deleteAfter() {

}`;
        }
        if (item.props.beforeGetListFn) {
          item.methods.beforeGetListFn = "beforeGetListFn";
          scripVue += `
function beforeGetListFn(obj, pageSize) {

}`;
        }
      }
      templateVue = templateVue + renderMap.template(item);
      scripOnmouted = scripOnmouted + renderMap.onMountedScript(item);
      item.childrens.map((ite) => {
        if (ite.type == "formItem") {
          if (!item.props.cformOpt) item.props.cformOpt = {};
          if (!item.props.cformOpt.items) item.props.cformOpt.items = {};
          item.props.cformOpt.items[ite.props.itemKey] = ite.props.item;
          if (ite.props.itemValue) {
            if (!item.formParams) item.props.formParams = {};
            item.props.formParams[ite.props.itemKey] = ite.props.itemValue;
          }
        }
        if (ite.type == "tableItem") {
          if (!item.props[`${item.key}Opt`]) item.props[`${item.key}Opt`] = {};
          if (!item.props[`${item.key}Opt`].columns) item.props[`${item.key}Opt`].columns = [];
          item.props[`${item.key}Opt`].columns.push(ite.props.column);
        }
      });
      scripVue = scripVue + renderMap.script(item);
    }
  });
  codeTemplate.value =
    `<template>
  <div class="container">${templateVue}
  </div>
</template>
<script setup lang="ts">${scripImport}${scripVue}
onMounted(() => {${scripOnmouted}
});
</scrip` + "t>";
  createCodeDioRef.value.compontOpen = true;
  initCodeContent();
}
</script>
<style scoped>
#coder {
  margin-top: 10px;
  width: 100%;
  overflow: auto;
  height: 800px;
}
</style>
